<template>
  <div class="recharge">
      <div @click="changeMoney($event)" v-bind:class="{ recharge_btn_choose: choose }" class="recharge-content">
          <div v-on:click.stop="changeMoney" class="recharge-amt">¥{{amt}}</div>
          <span v-on:click.stop="changeMoney" class="recharge-amt-real">到账{{real_amt}}元</span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'recharge',
  comments: 'recharge',
  props: {
    amt: String,
    real_amt: String,
    choose: Boolean
  },
  data () {
    return {
    }
  },
  watch: {
    choose (v) {
      // debugger
      console.log(v)
    }
  },
  methods: {
    changeMoney: function (event) {
      this.$emit('changeMoney', this.amt)
      if (event.currentTarget === this) {
        event.currentTarget.classList.add('recharge_btn_choose')
      }
    }
  }
}
</script>
<style lang="postcss" scoped>
.recharge{
    width: 33.33%;
    position: relative;
    float: left;
}
.recharge-content{
    border: 1px solid #fff;
    border-radius: 5px;
    color: #f8f8f8;
    margin: 5px;
}
.recharge-amt{
    font-weight: bold;
}
.recharge-amt-real{
    font-size: 12px;
}
.recharge_btn_choose{
    background-color: yellow;
    color: #333;
}
</style>
